<!DOCTYPE html>
<html>
    <head>
        <script src="js/vue.js"></script>
        <style>
            .chart {
                width: 200px;
                height: 50px;
                background-color: orange;
            }

            .hidden {
                /* width: 0px; */
                height: 0px;
            }

            .show {
                /* width: 200px; */
                height: 50px;
            }

            .active {
                transition: height 1s;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <button @click="toggle">改变图形宽度</button>
            <transition enter-class="hidden" enter-to-class="show" enter-active-class="active"
             leave-class="show" leave-to-class="hidden" leave-active-class="active" >
                <div v-if="isShow" class="chart"></div>
            </transition>
        </div>
        <script>
            var vm = new Vue({
                el:'#app',
                data : {
                    isShow:true
                },
                methods : {
                    toggle() {
                        this.isShow = !this.isShow;
                    }
                }
            });
        </script>
    </body>
</html>